// 右 -> 左
.slide-fade-right-enter-active {
    z-index: 88;
    transition: all .5s;
}

.slide-fade-right-leave-active {
    transition: all .5s;
}

.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
    transform: translateX(-100%);
}


// 左 -> 右
.slide-fade-left-enter-active {
    z-index: 88;
    transition: all .5s;
}

.slide-fade-left-leave-active {
    transition: all .5s;
}

.slide-fade-left-enter-from,
.slide-fade-left-leave-to {
    transform: translateX(100%);
}

// 上 -> 下
.top-fade-enter-active {
    transition: all .3s;
}

.top-fade-leave-active {
    transition: all .3s;
}

.top-fade-enter-from,
.top-fade-leave-to {
    transform: translateY(-100%);
}


// 下 -> 上
.bottom-fade-enter-active {
    transition: all .3s;
}

.bottom-fade-leave-active {
    transition: all .3s;
}

.bottom-fade-enter-from,
.bottom-fade-leave-to {
    transform: translateY(100%);
}